<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!-- 条码扫描  -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="条码扫描：">
              <a-input placeholder style="width: 200px" />
            </a-form-item>
          </a-col>
          <!-- 线体下拉输入框 -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="线体">
              <j-dict-select-tag
                placeholder="请选择"
                v-model="queryParam.filedType"
                dictCode="mes_filed_type"
              />
            </a-form-item>
          </a-col>
          <!-- 工站下拉输入框 -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="工站">
              <j-dict-select-tag
                placeholder="请选择"
                v-model="queryParam.filedType"
                dictCode="mes_filed_type"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 按钮区域 -->
      <div>
        <!-- 产品测试 -->
        <a-button class="BtMargin" @click="handleAdd" type="primary">产品测试</a-button>
        <!-- 超领物料 -->
        <a-button class="BtMargin" @click="handleAdd" type="primary">超领物料</a-button>
        <!-- 生产退料 -->
        <a-button class="BtMargin" @click="handleAdd" type="primary">生产退料</a-button>
        <span class="print">
          是否在线打印
          <a-switch class="switch" checked-children="开" un-checked-children="关" default-checked />
        </span>
      </div>
    </div>
    <!-- 查询区域-END -->

    <!-- 左右布局 -->
    <div class="container">
      <div class="left">
        <div class="left_container_laber">
          <div class="text_1">工序工单列表</div>
          <div class="text_2"></div>
        </div>
        <div class="left_container_info">
          <div>
            <div>500002912</div>
            <div>融合天线V2</div>
          </div>
          <div>
            <div>1000PCS</div>
            <div>2019-03-31</div>
          </div>
          <div>
            <a-button type="primary">进行中</a-button>
          </div>
        </div>
        <div style="display:flex">
          <div style="margin-left:10px">加工数量：1</div>
          <div style="margin-left:75px">加工数量：1</div>
        </div>
        <div style="margin-top:20px">
          <!-- 流程控制步骤条 -->
          <a-steps :current="current" @change="onChange" size="small">
            <a-step title="员工自检" />
            <a-step title="线长确认" />
            <a-step title="IQPC复核" />
            <a-step title="完成" />
          </a-steps>
        </div>
      </div>
      <div class="right">
        <!-- 右侧Table区域 -->
        <div style="line-height:40px;padding-left:20px">基础信息</div>
        <a-form
          class="ant-advanced-search-form"
          :form="form"
          @submit="handleSearch"
          labelAlign="left"
        >
          <!-- 第一行表单 -->
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="送检单号">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="生产工单">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="工序工单">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 第二行表单 -->
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="产品编号">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="产品名称">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="二级工序">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 第三行表单 -->
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="线体">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="设备编码">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="检验次数">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 第四行表单 -->
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="送检时间">
                <a-input placeholder="自动带入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="SN">
                <a-input placeholder="请扫描或者输入SN" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div
          style="margin-top:50px;line-height:40px;border:1px solid #eee;
        background:#eee;padding-left:10px"
        >检验项目</div>

        <div>
          <!-- Table信息列表区域 -->
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange"
          >
            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
              <img
                v-else
                :src="getImgView(text)"
                height="25px"
                alt="图片不存在"
                style="max-width:80px;font-size: 12px;font-style: italic;"
              />
            </template>

            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)"
              >下载</a-button>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>

              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                  <template
                    v-if="cgButtonLinkList && cgButtonLinkList.length>0"
                    v-for="(btnItem,btnIndex) in cgButtonLinkList"
                  >
                    <a-menu-item
                      :key=" 'cgbtnLink'+btnIndex "
                      v-if="showLinkButton(btnItem,record)"
                    >
                      <a
                        href="javascript:void(0);"
                        @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)"
                      >
                        <a-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                        {{ btnItem.buttonName }}
                      </a>
                    </a-menu-item>
                  </template>
                </a-menu>
              </a-dropdown>
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->

        <!-- 分页 -->
        <div style="display:flex;justify-content:flex-end;margin-top:20px">
          <template>
            <div id="components-pagination-demo-mini">
              <a-pagination
                :total="50"
                show-size-changer
                show-quick-jumper
                :show-total="total => `总计 ${total} 条`"
              />
            </div>
          </template>
        </div>
        <div
          style="border:1px solid #eee;background:#eee;line-height:40px;margin-top:10px;padding-left:10px"
        >质量判定</div>
        <div>
          <a-form
            style="padding-top:20px"
            class="ant-advanced-search-form"
            :form="form"
            @submit="handleSearch"
            labelAlign="left"
          >
            <!-- 检验结论表单 -->
            <a-row :gutter="24">
              <a-col :span="17">
                <a-form-item label="检验结论" style="width:200px;float:left">
                  <a-input placeholder="合格" />
                </a-form-item>
              </a-col>
              <a-col :span="7">
                <a-form-item label style="float:right">
                  <a-button style=" margin-right:10px">取消</a-button>
                  <a-button style=" margin-right:10px" margin-right:10px type="primary">确定</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
//1.引入JDictSelectTag组件
import JDictSelectTag from "@/components/dict/JDictSelectTag.vue";

import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { api } from "@/api/manage";
import JSuperQuery from "@/components/jeecg/JSuperQuery.vue";
import { filterObj } from "@/utils/util";
import MesMfProcessModal from "./modules/MesMfProcessModal";

import Vue from "vue";
import {
  initDictOptions,
  filterMultiDictText,
} from "@/components/dict/JDictSelectUtil";
import ButtonExpHandler from "@/components/jeecgbiz/modules/ButtonExpHandler";
import { postAction, getAction, deleteAction } from "@/api/manage";
import FxCompontensModal from "@/components/jeecgbiz/FxCompontensModal";

//高级查询modal需要参数
const superQueryFieldList = [
  {
    value: "productType",
    text: "产品类型",
    type: "string",
  },
  {
    value: "productCategory",
    text: "产品类别",
    type: "string",
  },
  {
    value: "processType",
    text: "工单类型",
    type: "select",
    dictCode: "mes_process_type",
  },
  {
    value: "taskSource",
    text: "任务来源",
    type: "string",
  },
  {
    value: "selfControl",
    text: "自制/外协",
    type: "string",
  },
  {
    value: "productionno",
    text: "工单号",
    type: "string",
  },
  {
    value: "processbillno",
    text: "工序工单号",
    type: "string",
  },
  {
    value: "processTwocode",
    text: "二级工序编码",
    type: "string",
  },
  {
    value: "processTwoname",
    text: "二级工序名称",
    type: "string",
  },
  {
    value: "lineno",
    text: "线体编码",
    type: "string",
  },
  {
    value: "linename",
    text: "线体名称",
    type: "string",
  },
  {
    value: "mcode",
    text: "物料编码",
    type: "String",
  },
  {
    value: "mname",
    text: "物料名称",
    type: "String",
  },
  {
    value: "bomversions",
    text: "BOM版本",
    type: "string",
  },
  {
    value: "billnoStatus",
    text: "工单状态",
    type: "select",
    dictCode: "mes_billno_status",
  },
  {
    value: "starttime",
    text: "计划开始时间",
    type: "Date",
  },
  {
    value: "completiontime",
    text: "计划完成时间",
    type: "Date",
  },
  {
    value: "qistate",
    text: "物料齐套状态",
    type: "select",
    dictCode: "mes_qistate",
  },
  {
    value: "planQty",
    text: "计划数量",
    type: "string",
  },
  {
    value: "schedule",
    text: "完成进度",
    type: "string",
  },
  {
    value: "bomstatus",
    text: "BOM状态",
    type: "int",
  },
  {
    value: "createBy",
    text: "创建人",
    type: "string",
  },
  {
    value: "createTime",
    text: "创建日期",
    type: "Date",
  },
  {
    value: "updateBy",
    text: "更新人",
    type: "string",
  },
  {
    value: "updateTime",
    text: "更新日期",
    type: "Date",
  },
  {
    value: "remark",
    text: "备注",
    type: "string",
  },
];

export default {
  name: "MesMfProcessTheFirstInspectionWork",
  mixins: [JeecgListMixin],
  components: {
    JSuperQuery,
    FxCompontensModal,
    MesMfProcessModal,
    JDictSelectTag,
  },
  data() {
    return {
      fieldList: superQueryFieldList,
      superQueryFlag: false,
      superQueryParams: "",
      description: "工序工单计划管理页面",
      //分页
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 50,
      // 表单验证
      expand: false,
      form: this.$form.createForm(this, { name: "advanced_search" }),

      cgButtonLinkList: [],
      title: "", //存表名
      EnhanceJS: "",
      cgButtonList: [],
      groupTag: [],
      queryInfo: [],
      code: "",
      // 表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "工站",
          align: "center",
          dataIndex: "processType_dictText",
        },
        {
          title: "检验项目",
          align: "center",
          dataIndex: "taskSource",
        },
        {
          title: "检验标准",
          align: "center",
          dataIndex: "processbillno",
        },
        {
          title: "值类型",
          align: "center",
          dataIndex: "processTwocode",
        },
        {
          title: "检验手段",
          align: "center",
          dataIndex: "processTwoname",
        },
        {
          title: "标准值",
          align: "center",
          dataIndex: "lineno",
        },
        {
          title: "上限值",
          align: "center",
          dataIndex: "linename",
        },
        {
          title: "下限值",
          align: "center",
          dataIndex: "x",
        },
        {
          title: "实测值",
          align: "center",
          dataIndex: "y",
        },
        {
          title: "单项判定",
          align: "center",
          dataIndex: "z",
        },
        {
          title: "检验人",
          align: "center",
          dataIndex: "h",
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "i",
        },
      ],
      url: {
        list: "/mes-manufacture/auto/mesMfProcess/list",
        delete: "/mes-manufacture/auto/mesMfProcess/delete",
        deleteBatch: "/mes-manufacture/auto/mesMfProcess/deleteBatch",
        exportXlsUrl: "/mes-manufacture/auto/mesMfProcess/exportXls",
        importExcelUrl: "/mes-manufacture/auto/mesMfProcess/importExcel",
        getColumns: "/mes-manufacture/online/cgform/api/getColumns/",
        buttonAction: "/mes-manufacture/online/cgform/api/doButton",
      },
      dictOptions: {},
    };
  },
  computed: {
    importExcelUrl: function () {
      return `${api.test}${this.url.importExcelUrl}`;
    },
    getWidth: function () {
      if (this.defColumns.length > 14) {
        return { width: "500px" };
      }
    },
    tableScroll: function () {
      if (this.columns.length > 13) {
        return { x: this.columns.length * 150 - 450 };
      }
    },
    // 表单验证
    count() {
      return this.expand ? 11 : 7;
    },
  },
  created() {
    this.initButtonList();
    this.initColumns();
    this.setdefColumns();
  },
  // 表单验证
  updated() {
    console.log("updated");
  },
  methods: {
    //分页
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
    },
    //表单验证
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    handleReset() {
      this.form.resetFields();
    },
    toggle() {
      this.expand = !this.expand;
    },
    //步骤条点击事件
    onChange(current) {
      console.log("onChange:", current);
      this.current = current;
    },
    setdefColumns() {
      if (this.columns.length > 13) {
        let arrLength = this.columns.length - 1;
        this.columns.forEach((item, index) => {
          item["width"] = 130;
        });
        this.columns[arrLength]["fixed"] = "right";
        this.columns[0]["fixed"] = "left";
        this.columns[1]["fixed"] = "left";
      }
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        });
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter((item) => {
          if (item.key == "rowIndex" || item.dataIndex == "action") {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        });
        this.columns = cols;
      }
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000);
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter((item) => {
        if (item.key == "rowIndex" || item.dataIndex == "action") {
          return true;
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true;
        }
        return false;
      });
      this.columns = cols;
    },

    //高级查询方法
    handleSuperQuery(arg) {
      if (!arg) {
        this.superQueryParams = "";
        this.superQueryFlag = false;
      } else {
        this.superQueryFlag = true;
        this.superQueryParams = JSON.stringify(arg);
      }
      this.loadData();
    },
    // 获取查询条件
    getQueryParams() {
      let sqp = {};
      if (this.superQueryParams) {
        sqp["superQueryParams"] = encodeURI(this.superQueryParams);
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.limit = this.ipagination.pageSize;
      return filterObj(param);
    },
    initDictConfig() {},

    // 弹出窗组件
    showDemoModal() {
      this.$refs.modalCompon.modalShow();
    },
    // 点击btn获取数据
    btnGetData(tableName, title) {
      getAction(`${this.url.getColumns}`, {
        tableName: tableName,
      }).then((res) => {
        if (res.code == 0) {
          this.queryInfo = res.data.columns;
          this.title = title;
          this.dictOptions = res.data.dictOptions;
          this.showDemoModal();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    //筛选分组
    getGroupTag(arrList) {
      let arr = [];
      var map = {},
        dest = [];
      arrList.forEach((item, index) => {
        if (item.groupTag) {
          arr.push(item);
        }
      });
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i];
        if (!map[ai.groupTag]) {
          dest.push({
            groupTag: ai.groupTag,
            name: ai.groupName,
            data: [ai],
          });
          map[ai.groupTag] = ai;
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.groupTag == ai.groupTag) {
              dj.data.push(ai);
              break;
            }
          }
        }
      }
      this.groupTag = dest;
      console.log(dest);
    },
    showLinkButton(item, record) {
      let btn = new ButtonExpHandler(item.exp, record);
      return btn.show;
    },
    initButtonList() {
      getAction(`${this.url.getColumns}8ac49ec7733bce48017355583cbc011c`).then(
        (res) => {
          console.log("--获取自定义按钮->>", res);
          if (res.success) {
            this.code = res.data.code;
            this.initCgButtonList(res.data.cgButtonList);
            this.initCgEnhanceJs(res.data.enhanceJs);
            this.getGroupTag(res.data.cgButtonList);
          } else {
            this.$message.warning(res.msg);
          }
        }
      );
    },
    initCgEnhanceJs(enhanceJs) {
      //console.log("--onlineList-js增强",enhanceJs)
      if (enhanceJs) {
        let Obj = eval("(" + enhanceJs + ")");
        this.EnhanceJS = new Obj(getAction, postAction, deleteAction);
        this.cgButtonJsHandler("created");
      } else {
        this.EnhanceJS = "";
      }
    },
    initCgButtonList(btnList) {
      let linkArr = [];
      let buttonArr = [];
      if (btnList && btnList.length > 0) {
        for (let i = 0; i < btnList.length; i++) {
          let temp = btnList[i];
          if (temp.buttonStyle == "button") {
            buttonArr.push(temp);
          } else if (temp.buttonStyle == "link") {
            linkArr.push(temp);
          }
        }
      }
      this.cgButtonLinkList = [...linkArr];
      this.cgButtonList = [...buttonArr];
      console.log("链接增强", this.cgButtonLinkList);
    },
    cgButtonJsHandler(buttonCode) {
      if (this.EnhanceJS[buttonCode]) {
        this.EnhanceJS[buttonCode](this);
      }
    },
    cgButtonActionHandler(buttonCode) {
      //处理自定义button的 需要配置该button自定义sql
      if (!this.selectedRowKeys || this.selectedRowKeys.length == 0) {
        this.$message.warning("请先选中一条记录");
        return false;
      }
      if (this.selectedRowKeys.length > 1) {
        this.$message.warning("请只选中一条记录");
        return false;
      }
      let params = {
        formId: this.code,
        buttonCode: buttonCode,
        dataId: this.selectedRowKeys[0],
      };
      console.log("自定义按钮请求后台参数：", params);
      postAction(this.url.buttonAction, params).then((res) => {
        if (res.success) {
          this.loadData();
          this.$message.success("处理完成!");
        } else {
          this.$message.warning("处理失败!");
        }
      });
    },
    cgButtonLinkHandler(record, buttonCode, optType) {
      if (optType == "js") {
        if (this.EnhanceJS[buttonCode]) {
          this.EnhanceJS[buttonCode](this, record);
        }
      } else if (optType == "action") {
        let params = {
          formId: this.code,
          buttonCode: buttonCode,
          dataId: record.id,
        };
        console.log("自定义按钮link请求后台参数：", params);
        postAction(this.url.buttonAction, params).then((res) => {
          if (res.success) {
            this.loadData();
            this.$message.success("处理完成!");
          } else {
            this.$message.warning("处理失败!");
          }
        });
      }
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";

.BtMargin {
  margin-right: 10px;
}
.sprint i {
  margin-left: 20px;
}

.switch {
  margin-left: 10px;
}
.putBoxShad:hover {
  box-shadow: -1px 0px 20px #333333;
  margin-bottom: 10px;
}
.ant-empty-normal {
  margin: 0;
}
.left_container_laber {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px 10px;
}
.left_container_info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.container {
  height: 100%;
  display: flex;
  margin-top: 20px;
}
.left {
  height: 800px;
  width: 400px;
  border: solid 1px #eee;
  display: flex;
  flex-direction: column;
}
.right {
  height: 800px;
  flex-grow: 1;
  border: solid 1px #eee;
  margin-left: 20px;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
.setPage {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.ant-advanced-search-form {
  padding: 0px;
}
.ant-form {
  line-height: 80px;
}
.ant-col .ant-col-8 {
  padding-top: 20px;
}
</style>
